
/* 引入格式化代码 */
@import "reset.css";

/* 引入多页面共同使用的代码 */
@import "common.css";



/* 统一样式 */

  button{

     cursor: pointer;

  }

  body{

     line-height: 2;

  }


  a{

    color: #3377aa;

}



/* 鼠标移入时的样式。 */
  a:hover{
  color: #fff;
  background: #37a;
  }


  
 


/* 鼠标激活时的样式。 */
a:active{

     color:#fff;
     background: #f93;

}

/* word-break属性是设置在合适的断点处进行换行，break-all表示允许在单词
内换行。 */
ul{
 
    word-break: break-all;

}


/* 统一样式结束 */



/* 首页通用样式 */


/* 这是一个在中间的一个盒子/区域,在中间的都可以用这个盒子。 */
.container{

    /* 宽度设置为950px,高度自适应 */
    width: 950px;
    margin: 0 auto;
}

.containercenter{

    margin-right: 158px;

}


/* 清除浮动 */
.clearfix::after{

	content: "";
	display: block;
	clear: both;
	 
}

/* 写了这些之后，以后你要浮动的元素直接加上这些样式就可以了，
   为以后写样式代码节约了时间。
*/
.left{

   float: left;
}

.right{

      float: right;

}


/* 用于制作热点内容区域 */
.section{

    padding: 35px 0;
    
       
}

.section:nth-child(even){

    background:#f7f7f7;

}

 
.aside-left{

   float: left;
   width: 100px;
   margin-right: 20px;

}

.aside-right{
 
    float: right;
    width: 265px;
    margin-left: 30px;
}



/* 中间栏要避开左边栏和右边栏，因为左边栏和右边栏是浮动盒子，所以我们
可以设置中间栏为BFC，这样中间栏就会避开左右两边的浮动盒子。 */
.main{
      
      /* 这样它就创建了一个BFC区域(块级格式化上下文)。 */
      overflow: hidden;



}


.adv img{

    /* 这里的100%是相对于它的父容器.aside-right的
    所以是265px; */
    /* width: 265px; */
    /* 用于消除图片下面的白边。 */
    display: inline;

       position: relative;
    
}

.section-title{

     margin: 12px 0;
}

.section-title h3.title{

     display: inline;
     color: #072;
     font-size: 15px;
}

.section-title h3.title::after{

    content: " · · · · · · ";
}

.section-title .link::before{

       content: "(";
}

.section-title .link::after{

    content: ")";

}

.section-title .link{

    font-size: 12px;

}



.adv-tag::after{

    content: "广告";

    color: #c9c9c9;

    font-size: 12px;

}


.aside-left .title{

   font-size: 24px;

}

.dark-color{

   color: #494949;

}


.time-list li{

  display: inline-block;
  vertical-align: top;
  line-height: 1.5;

}

.time-list li .img img{

    width: 100%;

    /* 这样设置是为了消除白边。 */
    display: block;
    
}


.left-menu{

   font-size: 14px;

}

.left-menu a.new{

   position: relative;

}


/* 设置一个内样式，用来给电影区域左边的列表加一个图标“new” */
.left-menu a.new::after{

    content: "";
    /* display: block; */
    background: url("./img/new.gif") no-repeat;
    width: 17px;
    height: 7px;

    /* 一个绝对定位的元素一定是块盒 */
    position: absolute;

    top: 0;
    right:-19px;

}


.right-menu-list li{

     float: left;

     
     font-size: 12px;

}

.block-link{

   padding:2px 10px;

   font-size: 12px;
   border-radius: 3px;
   display: inline-block;


}

.app-icon-1{

    width: 50px;
    height: 50px;
    display: block;
    /* 由于我们要用的是第一张图片，我们都不用去设置位置
    因为雪碧图默认就是第一张。 */
    background: url("./img/ds.jpg") no-repeat;
    box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, .2);
    border-radius: 4px;

}

.app-icon-2{

    width: 50px;
    height: 50px;
    display: block;
    /* 由于我们要用的是第一张图片，我们都不用去设置位置
    因为雪碧图默认就是第一张。 */
    background: url("./img/ds.jpg") no-repeat;
    box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, .2);
    border-radius: 4px;
    background-position: -250px 0;

}


.app-icon-3{

    width: 50px;
    height: 50px;
    display: block;
    /* 由于我们要用的是第一张图片，我们都不用去设置位置
    因为雪碧图默认就是第一张。 */
    background: url("./img/ds.jpg") no-repeat;
    box-shadow: 1px 1px 3px 2px rgba(0, 0, 0, .2);
    border-radius: 4px;
    background-position: -50px 0;

}

.menu-adv{

    margin-top: 20px;
    font-size: 12px;

    
}

 .group .group-name a{

    color: #333;
}


 .group .group-name a::after{

     content: "»";

}


 .group .right-menu-list li{

     margin-right: 10px;

}


/* 首页通用样式结束 */





/* 头部区域开始 */

.header{

   /* 设置头部区域高度 */
   height: 90px;


   /* 为了解决外边距合并的问题，这里我设置内边距，因为内边距不会合并
   但是，设置了内边距又有问题，因为我们设置的高度是内容区的高度，
   而这里设置的是内边距，导致尺寸变大了，所以我们还要设置
   box-sizing:border-box */
   box-sizing:border-box;
   padding-top: 30px;
   position: relative;

}

.header .logo a{

     /* a元素是行盒，设置不了宽高，所以我们这里把它设置为块盒。 */
     display: block;
     width: 154px;
     height: 30px;
     background: url("img/logo2.png") no-repeat left top/100%;
}

.header .logo a span{
 
     display: none;

}


.header .search .txt::placeholder{


     color: #ccc;

}


/* 设置文本框 */
.header .search .txt{

    width: 240px;
    height: 20px;
    padding: 5px;
    font-size: 13px;

}


/* 搜索框的那个边框不是设置文本框形成的，这里我们是设置外面容器的边框。
 */
.header .container .search{

   width: 270px;
   height: 30px;
   border: 1px solid #c3c3c3;
   margin-left:30px;

   position: relative;

   line-height: normal;
}


.header .container .search button{

    position: absolute;

    /* 设置绝对定位元素的垂直居中。 */
    height: 30px;
    top: 0;
    bottom: 0;
    margin: auto 0;

    right: 3px; 

    /* 因为这里我们用的是字体图标，所以直接设置字体颜色 */
    color:#c3c3c3;

}


.header .container .menu a{

    background: url("./img/right.png") no-repeat;

    width: 40px;

    height: 20px;

    /* a元素是行级元素，不能设置宽高，所以要改成块级元素。 */
    display: block;


    /* 这里我们设置浮动元素的话，那上一句设置块盒的代码就可以不写了
    因为设置了浮动元素，它就变成了块盒了。 */
    float: left;

    margin-left: 17px;
     
    /* 最后记得清除浮动,解决高度坍塌的问题。*/
}

.header .menu{

   margin-top: 6px;

   position: absolute;

   left: 690px;

}


.header .menu a.menu-read{

    background-position: 0 0;

}

   /* 负的60px,让图片向左边移动。（雪碧图的用法） */

.header .menu a.menu-movie{

    background-position: -60px 0;

}

.header .menu a.menu-music{

    background-position: -120px 0;

}

.header .menu a.menu-group{
 
    background-position: -180px 0;

}

.header .menu a.menu-city{

    background-position: -240px 0;
}

.header .menu a.menu-fm{
 
    background-position: -300px 0;
}

.header .menu a.menu-time{

    background-position: -360px 0;
}

.header .menu a.menu-dopin{

    width: 44px;
    height: 20px;
    background-position: -420px 0;
}

/* 头部区域结束 */


/* 横幅开始 */

.banner{

     height: 304px;
     background: url("./img/bj.jpg") no-repeat 20px top/auto 100% #edf4ed;

}

.db .banner .loginarea{

      width: 330px;
      height: 304px;

}

.banner .container .slogan{

     margin-top: 110px;
     margin-right: 32px;
    
}


.banner .container .slogan .title{

      font-size: 25px;
      color: #111;

}


.banner .container .slogan .title span{

    margin-left: 10px;

}

.banner .container .slogan .download .btn{

       width: 115px;
       height: 30px;
       font-size: 12px;
       line-height: 30px;
    
}

.banner .container .slogan .download{

       margin-top: 25px;

}

.banner .container .slogan .download .qrcode{

     display: inline-block;
     width: 28px;
     height: 28px;
     border:1px solid #48aa0d;
     border-radius: 2px;
     vertical-align: bottom;
     position: relative;
}

.banner .container .slogan .download .qrcode img{

      width: 100%;
      height: 100%;
     
     
}

.banner .container .qrcodeimage{

       position: absolute;
       left: -2px;
       top: -2px;
       width: 200px;

       text-align: center;

       padding: 15px;
       box-sizing: border-box;

       /* 内边距已经出来了，只是它的背景透明，所以看不见，这里
       我们设置一个背景颜色。 */
       background: #ffffff;
       border-radius: 4px;

}


.banner .container .qrcodeimage p{
    
      font-size: 13px;

 }

 .banner .container .slogan .download .qrcode:hover .qrcodeimage{

         display: block;

 }

/* 横幅结束 */


/* 热点内容区域开始 */

.hot-list{

    line-height: 1.5;

}

.hot-list li{

     margin-bottom: 15px;

}

.hot-list li .title{

     font-size: 14px;

}

.hot-list li .desc{

    font-size:13px;

    color: #aaaaaa;

}

.hot-list li .desc span{

   margin-right: 4px;
     
}


.hot-main .left{

   width: 350px;

   
}

.hot-main .left li{

     display: inline-block;

     width: 170px;

     font-size: 12px;

     margin: 10px 0;

     /* 设置行盒之间的垂直方向对齐，用这个属性来调。 */
     vertical-align: top;
}

.hot-main ul{

      text-align: justify;  

      line-height: 1.5;

}

.hot-main ul::after{

        content: "";

        display: inline-block;
        width: 100%;

       

}



.hot-main .left li .img img{

      width: 100%;

      display: block;

}

.hot-main .left li .words span{

     color: #999;

}

.hot-main .right {

    width: 275px;

    font-size: 12px;

}

.hot-main .right li{

     margin-bottom: 12px;

}

.hot-main .right  li .title{

    color: #999;

}

.hot-main .right li .desc{

    color: #666;

}

/* 热点内容区域结束 */



/* 豆瓣时间区域开始 */

.time-main li{

   /* 这里我们设置li为行块盒，从而使其水平排列。 */
   display: inline-block;

   width: 100px;

   margin-right: 60px;
   margin-bottom: 30px;

   line-height: 1.5;
   font-size: 13px;

   text-align: center;

   vertical-align: top;

}

.time-main li .img img{

    width: 100%;


    /* 这里你会发现图片你鼠标移入时，下面产生了一个像是下边框的一个东西
    这是因为图片产生了白边，而且这里的img是被a标签包裹的，我们给a标签
    设置了鼠标移入时的背景色，从而导致了白边变成了这个背景色，总之我们
    要解决这个问题的方法是给图片设置display:block;   */
    display: block;
}

.time-main li .words a{

      color: #333;

}

.time-main li .words a:hover{
 
      color: #fff;
}

.time-main li .words span{

       display: block;
       font-size: 12px;
       color: #999;
       margin-top: 10px;

}
/* 豆瓣时间区域结束 */


/* 视频区域开始 */



/* 这里鼠标移入a元素，不需要有什么样式，所以这里把之前的给覆盖掉。 */
.video-main .section-title a:hover{

    /* 设置为默认样式 */
    background: initial;
     
}

.video-main li{

      width: 250px;
      display: inline-block;
      margin-right: 30px;
      font-size: 13px;
      /* 设置顶端对齐 */
      vertical-align: top;

}

.video-main li:nth-child(3n){

      margin: 0;

      line-height: 1.5;
}

.video-main li .img img{

      width: 100%;

      vertical-align: top;

}

.db .section .video-main .section-title li .words a{

       color: #000;


}

.db .section .video-main .section-title li .words a:hover{

    color:#fff;
    background: #37a;
    

}

.video-main li .img{

    position: relative;

}

.video-main li .img::before{

    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0,0, .3);
    /* 让这里的字体图标变成白色。 */
    color: #fff;
    text-align: center;
    line-height: 144px;
    font-size: 35px;
    

}

/* 视频区域结束 */



/* 电影区域开始 */


 .aside-right.ts{

    margin-top: -581px;

}

.movie-area .right-menu-list li{

        width: 48px;
        height: 24px;
        overflow: hidden;
     
}

.order-movie-list{

    font-size: 12px;

}




.order-movie-list li{

    border-bottom: 1px solid #eaeaea;

    margin-bottom: 6px;

    /* list-style-type 属性设置列表项标记的类型
        decimal表示的是数字 */
    list-style-type:decimal;

    list-style-position: inside
    /*  list-style-position: inside:规定列表中列表项目标记的位置：
      inside代表：列表项目标记放置在文本以内，且环绕文本根据标记对齐 */

    
}

.order-movie-list li a{

    margin-left: 5px;

}

.main.tengshu{

    width:550px;

}

.movie-area .time-list li{
 
    width: 100px;

    margin-right: 32px;

    margin-bottom: 40px;
    text-align: center;
    font-size: 13px;

}

.movie-area .time-list li .words{

     margin-top:9px;
     margin-bottom: 4px;
     
}

.movie-area .time-list .words a{

    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    color: #000;

}

.movie-area .time-list .words a:hover{

   
    background: #37a;
    color: #fff;

}




.movie-area .func .block-link{

    background: #1c8bd0;
    color: #fff;
    margin-top: 5px;

    vertical-align: middle;

}

.star{

    vertical-align:middle;

}

.movie-area .func .block-link:hover{

       background: #047fcb;
}

.dybt{

    color: #27a;

}


/* 电影区域结束 */




/* 小组区域开始 */

 .group-area  a{

      color: #007982;

}

.group-area a:hover{

    color:#fff;

}


.group-area .group .group-name a:hover{
   
      color: #fff;
      background: #3377aa;
     
}


.group-area .group{

    margin-top: 6px;

}


.group-area .main .time-list li{

      width: 248px;

      margin-bottom: 30px;

      font-size: 13px;

}


.group-area .main .time-list {

        text-align: justify;    


}

.group-area .main .time-list::after{

   content: "";
   display: inline-block;
   width: 100%;

}



.group-area .main .time-list li .img {

      float: left;

      width: 48px;
      margin-right: 15px;
    
}

.group-area .main .time-list .words span{

      display: block;
      color: #999;
      font-size: 12px;
      margin-top: 5px;

}


.main.ttss{

    width: 535px;
}

.group-area .aside-right{

     margin-top: -630px;
     margin-left: 308px;


}

.group-area .main .time-list li .words{

   overflow: hidden;
     

}


/* 小组区域结束 */



/* 读书区域开始 */





.book-area .right-menu-list li{

        margin-right: 10px;

}

.book-area .right-menu-list li span{
 
    color: #999;

}

.book-area .right-menu-list li span::before{

      content: "[";

}
.book-area .right-menu-list li span::after{

    content: "]";

}

.book-area .group{

    border-bottom:1px solid  #eaeaea;
    padding: 10px 0;

}

.book-area .group:last-child{

      border-bottom: none;

}

.book-area .left-menu li a{

    color:#494949;

}


.book-area .right-menu-list a{

   color: #494949;

}

.book-area .right-menu-list a:hover{

    color: #fff;
 
 }

.book-area .left-menu li a:hover, .book-area a:active{

   color: #fff;

}

.book-area .time-list li{

        width: 100px;
        
        margin-right: 38px;
        font-size: 13px;
        text-align: center;


}

/* 每4个要换行，所以我们把第四个li的margin-right设置为0； */

.book-area .time-list li:nth-child(4n){

      margin-right: 0;

}

.book-area .time-list li .words{
 
    margin-top: 15px;
    
}

.book-area .time-list li .words span{

    display: block;
    color: #111;
    font-size: 12px;
    margin-top: 8px;
   

}

.book-area .time-list li .func .block-link{

      background: #999a95;
      color: #fff;

}

.book-area .time-list li .func .block-link:hover{

    background:#878882 ;
  

}


/* 读书区域结束 */


/* 音乐区域开始 */

.music-area a{

   color: #555d53
     
}

.music-area .aside-left .title a{

    color: #f38c00;

}


.music-area .aside-left .title a:hover , .music-area .aside-left .title a:active{

    color: #fff;

}

.music-area  a:hover , .music-area  a:active{

     color: #fff;

}

.music-area .music-player-list li .player{

        width: 240px;
        display: block;
}


.music-area .music-player-list li .number{

     font-size: 12px;
     color: #111;
}

.music-area .music-player-list li .player .img{

         width: 48px;
         height: 48px;
         /* display: block; */
         position: relative;
}

.music-area .music-player-list li .player .img img{
      width: 100%;
      height: 100%;
   /* 相对于它的父容器.img的100%。 */
    
    display: block;
     
}

.music-area .music-player-list li .player .img::before{
 
       position: absolute;
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
       background: rgba(0, 0,0, .7);
       line-height: 48px;
       text-align: center;
       color: #fff;
       font-size: 12px;
       display: none;
       
}

/* 设置鼠标移入的时候找到它的::before ,让其显示出来！！！*/
.music-area .music-player-list li .player .img:hover::before{

      display: block;

}

.music-area .music-player-list li .player .words{

       width: 180px;
       margin-left: 8px;
       font-size: 12px;
       
       
}


.music-area .music-player-list li .player .words span{

       display: block;
       color: #999;
       line-height: 1.5;

}

.music-area .music-player-list li{
 
    margin: 15px 0;

}

.music-area .time-list  li{

       width: 130px;
       /* 行盒居中 */
       text-align: center;
       font-size: 12px;
       margin-bottom: 40px;
}

.music-area .time-list li .words{

       margin: 4px 0;

}

.music-area .time-list li .img img{

    width: 80px;

    /* 块盒居中，由于text-aling:center是对其没有影响的
    所以块盒居中用的是margin: 0 auto; */
    margin: 0 auto;
}


.music-area .time-list.hot-music li .words{

         font-size: 13px;
         margin: 8px 0;
        
}

.music-area .time-list.hot-music li .img{

      position: relative

}

.music-area .time-list.hot-music li .img::before{
 
     position: absolute;
     width: 40px;
     height: 40px;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     margin: auto;
     font-size: 34px;
     line-height: 40px;
     color: #fff;
     background: rgba(0, 0, 0,.4);
     border-radius: 50%;


}

/* 音乐区域结束 */




/* 豆品开始 */

.doupin-area .aside-left .title a{

     color: #1f9432; 
    
}

.doupin-area .aside-left .title a:hover,
.doupin-area .aside-left .title a:active
{

   color: #fff;

}



/* 设置鼠标移入的时候找到它的::before ,让其显示出来！！！*/
/* .music-area .music-player-list li .player .img:hover::before{

    display: block;

} */

.doupin-area .aside-right{

    font-size: 14px;

}



.doupin-area .aside-right .adv a img{
      /* 先设置它为块盒清除掉它下面的白边 */
      display: block;
      width: 100%;
      height: 100%;
      position: relative;
  
}

.doupin-area .aside-right .adv a img:hover{

      opacity: 0.8;

}




.doupin-area .main .time-list li{

         width: 240px;
         margin-right: 20px;
         font-size: 16px;
         margin-bottom: 30px;
}

.doupin-area .main .time-list li .words{

     margin-top: 10px;

}

.doupin-area .main .time-list li img:hover{

     /* 这个属性用于设置图片的不透明度 */
     opacity: 0.8;

}

.doupin-area .main .time-list li .words span{

       color:#e55457 ;
}

/* 豆品结束 */


/* 同城开始 */

.city-area a{

   color: #643;

}

.city-area a:hover,
.city-area a:active{

    color: #fff;

}


.city-area .aside-left .title a{

     color: #ec5303;

}

.city-area .aside-left .title a:hover,
.city-area .aside-left .title a:active{

      color: #fff;

}

.city-area .aside-right .group .group-name a{

      font-size: 14px;

}


.city-area .main li{
     
      width: 248px;
      margin-right: 20px;
      margin-bottom: 40px;

}

.city-area .time-list li:nth-child(even){

     margin-right: 0;

}

.city-area .time-list li .img{

    margin-right: 10px;

}

.city-area .time-list li .words{
   
     /* 这是为了让它成为一个BFC */
     overflow: hidden;

}

.city-area .time-list li .words a{
 
      font-size: 13px;

}

.city-area .time-list li .words span{
 
      font-size: 12px;
      display: block;
      color: #666;
}

/* 同城结束 */



/* 页脚开始 */

.footer{
 
    font-size: 12px;
    line-height: 1.5;

    color: #999;

    margin-top: 30px;
   
}


 .footer .container{

    border-top: 1px dashed #dcdcdc;

    padding-top: 14px;
    padding-bottom: 30px;

 }



.footer .left img{

     height: 16px;

     vertical-align: middle;

}

.footer .left{

   width:50%;

   

}


.footer .right nav.menu a{
 
  
     margin: 0 2px;

}

.footer .right nav.menu a:first-child{

        margin-left: 0;

}

.footer .right .adv a img{

    width: 150px;
    display: block;
    margin-top: 20px;
}



/* 页脚结束 */
      